<template>
  <div class="d-flex flex-column my-container p-3">
    <el-form ref="form" :model="searchForm" :inline="true" class="d-flex justify-content-end">
      <el-form-item>
        <el-input prefix-icon="el-icon-search" type="input" placeholder="请输入大屏标题"
                  v-model="searchForm.searchInput"
                  clearable @clear="searchClick" @keyup.enter.native="searchClick"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="mb-3">
        <el-button type="primary" icon="el-icon-circle-plus-outline" v-permission="'DPKSH_ADD'"
                   @click="openAddScreenDialog">新建大屏
        </el-button>
        <el-button type="success" icon="el-icon-refresh" @click="searchClick">刷新</el-button>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="visualizationName" label="大屏标题" align="center"/>
          <el-table-column prop="visualizationType" label="大屏类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.visualizationType == 0 ? "不带中间区域" : "带中间区域" }}
            </template>
          </el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="350">
            <template #default="{ row }">
              <el-button type="primary" size="mini" v-permission="'DPKSH_GXBJ'" @click="handleLook(row)">更新布局
              </el-button>
              <el-button type="warning" size="mini" v-permission="'DPKSH_GXCS'" @click="openConfigDialog(row)">更新参数
              </el-button>
              <el-button type="primary" size="mini" v-permission="'DPKSH_LL'" @click="goCe(row)">预览</el-button>
              <el-button type="danger" size="mini" v-permission="'DPKSH_DEL'" @click="onDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
                  @pagination="pagination"/>
    </div>

    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" dialogTitle="新建大屏" centerTitle="新建大屏" :showCenter="false" v-draggable>
      <template #content>
        <div class="dialog-content">
          <el-form ref="screenFormRef" :rules="screenRules" :model="screenForm" label-width="90px">
            <el-form-item label="大屏类型" prop="visualizationType">
              <el-select v-model="screenForm.visualizationType" style="width: 100%">
                <el-option v-for="item in screenTypeList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="nextBtn">下一步</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import { queryPageVVisualization, deleteVVisualization } from "@/api/chartControl/index"

  export default {
    data() {
      return {
        tableData: [],
        loading: false,
        screenForm: {
          visualizationType: ""
        },
        screenRules: {
          visualizationType: [{ required: true, message: "请选择大屏类型", trigger: "change" }]
        },
        screenTypeList: [
          { id: "0", name: "不带中间区域" },
          { id: "1", name: "带中间区域" }
        ],
        searchForm: {
          searchInput: ""
        },
        pageIndex: 1,
        pageSize: 20,
        count: 0
      }
    },
    components: {
      ycDialog
    },
    created() {
      this.queryBTopicMainList()
    },
    methods: {
      goCe(row) {
        window.open(`http://36.138.43.160:83/#/?configCode=${row.configCode}`)
      },

      onDel(data) {
        this.$confirm("确定删除该可视化大屏配置?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteVVisualization({
              id: data.id
            }).then((res) => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                })
                this.searchClick()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            })
          })
      },
      queryBTopicMainList(pageIndex = 1, pageSize = 20) {
        this.loading = true
        const { searchInput } = this.searchForm
        queryPageVVisualization({
          pageIndex,
          pageSize,
          configName: searchInput
        })
          .then((res) => {
            this.tableData = res.object.data
            this.count = res.object.count
          })
          .finally(() => {
            this.loading = false
          })
      },
      // 分页
      pagination(pageItem) {
        this.queryBTopicMainList(pageItem.page, pageItem.limit)
      },
      // 模糊查询
      async searchClick() {
        this.queryBTopicMainList(1, 20)
      },
      // 打开新建大屏dialog
      openAddScreenDialog() {
        if (this.$refs["screenFormRef"]) {
          this.$refs["screenFormRef"].resetFields()
        }

        this.$refs.ycDialog.dialogVisible = true
      },
      // 新建大屏下一步
      nextBtn() {
        this.$refs["screenFormRef"].validate((valid) => {
          if (valid) {
            this.$router.push({
              path: "/chartControl/dispositionVisualization",
              query: {
                type: 0,
                visualizationType: this.screenForm.visualizationType
              }
            })
          }
        })
      },
      // 查看
      handleLook(row) {
        this.$router.push({
          path: "/chartControl/dispositionVisualization",
          query: {
            id: row.id,
            visualizationType: row.visualizationType,
            visualizationName: row.visualizationName,
            modelPic: row.modelPic,
            configCode: row.configCode,
            type: 0 //0是更新布局，1是更新参数
          }
        })
      },
      // 配置
      openConfigDialog(row) {
        this.$router.push({
          path: "/chartControl/dispositionVisualization",
          query: {
            id: row.id,
            visualizationType: row.visualizationType,
            visualizationName: row.visualizationName,
            modelPic: row.modelPic,
            configCode: row.configCode,
            type: 1 //0是更新布局，1是更新参数
          }
        })
      },
      /**
       * 刷新
       */
      refresh() {
        this.loading = true
        this.queryBTopicMainList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
